<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>我要报修</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <style>
        html, body, #app {
            height: 100%;
            overflow: hidden;
        }

        .search-box {
            width: 90%;
            margin: 1rem auto 0;
        }

        .search-box input {
            margin-top: 1rem;
            border: none;
            background-color: #F3F3F3;
            border-radius: 2rem;
            font-size: 1.4rem;
            padding: 1rem;
            text-align: center;
            color: #333;
        }

        .search-box p {
            text-align: right;
            font-size: 1.2rem;
            color: #65c459;
        }

        .next {
            width: 65% !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>我要报修</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container xl-bg-white top">
        <div class="search-box">
            <input v-model="code" style="text-align: left;padding: 0 3rem" type="text" placeholder="请输入出现故障的机具编号">
            <p><span @click="scanCode">点击扫码识别</span></p>
        </div>

        <div @click="goNext" class="xl-btn normal next no-shadow">下一步</div>

        <xlb-modal v-model="tipMod">
            <div class="dialog-content" slot="content">{{tipContent}}</div>
            <div slot="footer-left">取消</div>
            <div @click="goAddPage" slot="footer-right">继续报修</div>
        </xlb-modal>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            code: '',
            tipMod: false,
            tipContent: '',
            type: '' // 保修类型 1 工程师， 2 故障确认
        },
        methods: {
            // 跳转故障详情
            goNext: function () {
                if (!this.code) {
                    return mui.toast("请输入出现故障的机具编号")
                }
                scaned('', this.code);
            },
            goAddPage: function () {
                redirect(getNavUrl(this.code));
                setTimeout(function () {
                    vm.code = '';
                    vm.tipMod = false;
                }, 1000)
            },
            scanCode: function () {
                redirect('pages/common/scanCode.html')
            },
            test: function () {
                plus.navigator.setStatusBarStyle('dark');
            }
        }
    });

    //扫码触发deviceCode
    function scaned(type, result, file) {
        vm.code = result;
        var api = getDeviceApi();
        Resource.post(api, {code: result}, function (res) {
            // 是否有网点人员
            if (isInLineOrder()) {
                if (res.dotBankUsrs.length === 0) {
                    return mui.toast('没有网点人员无法报修！');
                }
            }
            // 判断是否弹出 继续报修model
            if (res.orderInfoMap.id) {
                vm.tipMod = true;
                vm.tipContent = buildErrorMsg(res.orderInfoMap.startUnType , res.orderInfoMap.startUnDesc);
                return;
            }
            vm.goAddPage();
        })
    }

    /**
     * 构建异信息
     */
    function buildErrorMsg(startUnType,startUnDesc) {
        return '该机具已经被报修(【故障模块】:' + startUnType + '【故障描述】:' + startUnDesc + '),是否继续报修？';
    }

    /**
     * 获取跳转地址URL
     */
    function getNavUrl(code) {
        return isInLineOrder() ? 'pages/order/add/orderAddInLine.html?code=' + code : 'pages/order/add/orderAdd.html?code=' + code;
    }

    /**
     * 获取机具查询信息url
     * @returns {string|*}
     */
    function getDeviceApi() {
        if (isInLineOrder()) { // 内部保修
            return DEVICE_INLINE_API;
        }
        return DEVICE_API;
    }

    /**
     * 判断是否是内部保修
     */
    function isInLineOrder() {
        return vm.type === 2;
    }

    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        var type = self.type;
        if (type == '' || type == 'undefined') {
            return;
        }
        vm.type = parseInt(type);
    })

</script>
</body>
</html>